<template>
	<view class="container">
		<view class="order-info">
			<text>核销码 : MC-1234-5678-9012</text>
			<text>车辆 : 乔夫PWE4/豫A98FHJ</text>
		</view>
		<view class="service-info">
			<text class="section-title">服务内容</text>
			<view class="leftright">
				<view>
					<text>车辆精洗</text>
					<text>车辆附加费用</text>
				</view>
				<view class="right">
					<text>￥100</text>
					<text>￥100</text>
				</view>
			</view>
		</view>
		<view class="payment-info">
			<text class="section-title">订单信息</text>
			<view class="leftright">
				<view>
					<text>原价</text>
					<text>优惠</text>
					<text>实付金额</text>

					<text>订单编号</text>
					<text>预约时间</text>
					<text>支付时间</text>
					<text>核销时间</text>
				</view>
				<view class="right">
					<text>￥100</text>
					<text style="color: red;">-￥10</text>
					<text style="color: red;">￥25.00</text>

					<text>1223233445</text>
					<text>2020-02-18 19:24:28</text>
					<text>2020-02-18 19:24:28</text>
					<text>2020-02-18 19:24:28</text>
				</view>
			</view>

		</view>

		<button class="confirm-button" :class="{ 'button-disabled': isVerified }" :disabled="isVerified"
			@click="showPopup = true">
			{{ isVerified ? '已核销' : '确认核销' }}
		</button>

		<view v-if="showPopup" class="popup">
			<view class="popup-content"> <text class="popup-title">核销此订单</text>
				<text>请您仔细核对订单</text>
				<text class="popup-message">此操作不可撤销，请谨慎操作。</text>

				<view class="popup-buttons"> <button @click="verifyOrder" class="popup-confirm">核销</button> <button
						@click="showPopup = false" class="popup-cancel">取消</button> </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup: false,
				isVerified: false
			};
		},
		methods: {
			verifyOrder() {
				this.isVerified = true;
				this.showPopup = false;
			}
		}
	};
</script>

<style>
	.container {
		padding: 20px;
		background-color: #f8f8f8;
	}

	.header {
		text-align: center;
		margin-bottom: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
	}

	.order-info,
	.service-info,
	.payment-info,
	.additional-info {
		margin-bottom: 20px;
	}

	.section-title {
		font-weight: bold;
		margin-bottom: 10px;
	}

	text {
		display: block;
		margin-bottom: 5px;
	}

	.confirm-button {
		/* padding: 15px; */
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 4px;
		text-align: center;
		width: 80%;
		height: 50px;
	}

	.leftright {
		display: flex;
		justify-content: space-between;
	}

	.right {
		text-align: right;
	}



	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup-content {
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
		text-align: center;
		width: 80%;
	}

	.popup-title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.popup-message {
		margin-bottom: 20px;
	}

	.popup-buttons {
		display: flex;
		justify-content: space-around;
	}

	.popup-confirm,
	.popup-cancel {
		/* padding: 10px 20px; */
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 4px;
		height: 50px;
		width: 40%;
	}

	.popup-cancel {
		background-color: #ccc;
	}

	.button-disabled {
		background-color: #cccccc !important;
		cursor: not-allowed;
	}
</style>